<template>
    <!-- 搜索框 -->
    <el-form inline>
        <el-form-item label="学生名字:">
            <el-input v-model="search.user_name" @change="updateList()" placeholder="请输入学生名字"></el-input>
        </el-form-item>
        <el-form-item label="学生角色:">
            <el-select v-model="search.role_id" @change="updateList()">
                <el-option label="- 请选择 -" :value="-1"></el-option>
                <el-option label="- 无角色 -" :value="0"></el-option>
                <el-option v-for="item in roleStore.allRoles"
                    :key="item.role_id"
                    :label="item.role_name"
                    :value="item.role_id"
                ></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" border stripe height="600" style="background-color: transparent">
        <el-table-column type="index" label="#" width="100"></el-table-column>
        <el-table-column prop="user_name" label="用户名" width="150"></el-table-column>
        <el-table-column prop="role_id" label="角色" width="150">
            <template #default="{row}">
                <span v-if="row.role_id === null">- 无角色 -</span>
                <span v-else>{{roleStore.allRoles.find(item => item.role_id === row.role_id)?.role_name}}</span>
            </template>
        </el-table-column>
        <el-table-column>
            <template #header>
                <span style="margin-right:50px">操作</span>
                <el-button type="info" @click="beginAdd">+新增</el-button>
            </template>
            <template #default="{row}">
                <el-button type="success" @click="resetPwd(row)">重置密码</el-button>
                <el-button type="primary" @click="beginRoleConfig(row)">分配角色</el-button>
                <el-button type="danger" @click="remove(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        :total="pagination.total"
        :page-sizes="[6,8,10,12]"
        background
        v-model:page-size="pagination.pageSize"
        v-model:current-page="pagination.currentPage"
        layout="prev, pager,next,jumper,->,total,sizes"
        @size-change="updateList()"
        @current-change="updateList">
    </el-pagination>
    <!-- 新增用户弹出层 -->
    <el-dialog v-model="userEdit.isEdit" title="新增用户">
        <el-form :model="userEdit.model" :rules="userEdit.rules" :ref="(el: any) => userEdit.formRef = el">
            <el-form-item label="用户名:" prop="user_name">
                <el-input v-model="userEdit.model.user_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="add">确定</el-button>
                <el-button @click="userEdit.isEdit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
     <!-- 分配角色弹出层 -->
     <el-dialog v-model="roleConfig.isEdit" title="用户角色分配">
        <el-form label-width="100">
            <el-form-item label="用户名:">
                <span>{{ roleConfig.model.user_name}}</span>
            </el-form-item>
            <el-form-item label="用户角色:">
                <el-select v-model="roleConfig.model.role_id">
                    <el-option label="- 无角色 -" :value="0"></el-option>
                    <el-option v-for="item in roleStore.allRoles"
                        :key="item.role_id"
                        :label="item.role_name"
                        :value="item.role_id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="saveRoleConfig">确定</el-button>
                <el-button @click="roleConfig.isEdit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import {markRaw, onMounted,reactive,Raw, nextTick} from 'vue';
import {useRoleStore} from '@/store';
import { UserApi } from '@/api';
import { ElMessageBox, ElMessage } from 'element-plus';
import { FormRules,FormInstance} from 'element-plus';

const roleStore = useRoleStore();

const list = reactive<Array<Vm.User>>([]);
const search = reactive({user_name:"",role_id:-1});
const pagination = reactive({currentPage:1,pageSize:6,total:0});
const userEdit = reactive<{
    isEdit: boolean;
    formRef: FormInstance | null;
    model: HttpPayload.UserEdit;
    rules: Raw<FormRules>;
}>({
    isEdit: false,
    formRef: null,
    model: {user_name:"",user_pwd:'123' },
    rules: markRaw({
        user_name:[
            {required: true, message:"* 用户名不能为空", trigger:"blur"},
            {min:2,max:20, message:"* 用户长度2-20", trigger:"blur"}
        ]
    })  
});
const roleConfig = reactive<{
    isEdit: boolean;
    formRef: FormInstance | null;
    model: HttpPayload.UserRole;
}>({
    isEdit: false,
    formRef: null,
    model: {user_name:"",role_id: 0}
});
const updateList = async(currentPage: number = 1) => {
    pagination.currentPage = currentPage;
    list.splice(0, list.length);
    const result=await UserApi.getList({...search, begin:(pagination.currentPage - 1) * pagination.pageSize, pageSize: pagination.pageSize}); //发送ajax
    list.push(...result.list);
    pagination.total = result.total;
};

onMounted ( async() => {
    try{
        await roleStore.init();  //初始化
        await updateList();
    } catch(e) {/**/}  
});

const resetPwd = async (user: Vm.User) => {
    try{
        //确认是否删除？
        await ElMessageBox.confirm(`确定重置:"${user.user_name}"的密码吗?`,'提示',{type:"warning"});
        //发送ajax重置密码
        await UserApi.resetPwd({user_name: user.user_name, user_pwd:'123'});
        //提示成功 
        ElMessage({type:"success", message:`重置用户:"${user.user_name}"的密码成功`});
    } catch(e) {/**/}
};

const remove = async (user: Vm.User) => {
    try{
        //确认是否删除？
        await ElMessageBox.confirm(`确定删除用户:"${user.user_name}"吗?`,'提示',{type:"warning"});
        //发送ajax删除用户
        await UserApi.remove(user.user_name);
        updateList();
        //提示成功
        ElMessage({type:"success", message:`用户:"${user.user_name}"删除成功`});
    } catch(e) {/**/}
};

const beginAdd = () => {
    userEdit.formRef?.resetFields();
    userEdit.model.user_name = "";
    nextTick(() => userEdit.isEdit = true);
};

const add = async() => {
    try{
        //表单验证
        userEdit.formRef?.validate();
        //唯一性验证
        const flag = UserApi.valideName({user_name:userEdit.model.user_name});
        if(await flag === 1){
            ElMessage({type:"error", message:`用户名:"${userEdit.model.user_name}"已存在`});
            return;
        }
        //发送ajax保存
        await UserApi.add(userEdit.model);
        //更新list
        await updateList();
        //提示用户
        ElMessage({type:"success", message:`用户:"${userEdit.model.user_name}"添加成功`});
        //关闭dialog
        userEdit.isEdit = false; 
    }catch(e){/**/}
};

const beginRoleConfig = (user: Vm.User) => {
    roleConfig.model.user_name = user.user_name;
    roleConfig.model.role_id = user.role_id || 0;
    nextTick( () => roleConfig.isEdit = true);
};

const saveRoleConfig = async () => {
    await UserApi.roleConfig(roleConfig.model);
    (list.find(item => item.user_name === roleConfig.model.user_name) as Vm.User).role_id
        = roleConfig.model.role_id === 0 ? null : roleConfig.model.role_id;
    ElMessage({type:"success", message:`用户:"${roleConfig.model.user_name}"角色分配成功`});
    roleConfig.isEdit = false;
};
</script>

<style scoped lang="stylus">

</style>